import Taro, { Component, Config } from '@tarojs/taro'
import { View, Input, Picker, Image } from '@tarojs/components'
import { SDBody, SDText } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import './index.less'
import IconNext from '../../../../images/ic_next.png'
import SDButton from "../../../../comps/sd-button";

type PageState = {
  isSelectArea: boolean,      // 是否选择了门店所在地区
  addressArea: string,        // 门店所在地区
  btnIsLoading: boolean
}

export default class LaunchApplyEditPage extends Component<{}, PageState> {

  config: Config = {
    navigationBarTitleText: '填写门店信息',
    backgroundColor: '#fff'
  }

  storeInfo = {
    name: '',           // 门店名称
    province: '',       // 门店省份
    provinceId: '',     // 省份ID
    city: '',           // 门店城市
    cityId: '',         // 城市ID
    country: '',        // 门店地区
    countyId: '',       // 地区ID
    address: '',        // 详细地址
    contactName: '',    // 联系人姓名
    contactTel: '',     // 联系人电话
  }

  constructor () {
    super()
    this.state = {
      isSelectArea: false,
      addressArea: '',
      btnIsLoading: false
    }
  }

  render () {
    const bottomSafeHeight = Taro.getSystemInfoSync().statusBarHeight == 44 ? 34 : 0;
    const { isSelectArea, addressArea, btnIsLoading } = this.state

    return (
      <SDBody sd-class='container' loading={false}>
        <View className='cell-item border-bottom_1px'>
          <View className='title'>名称</View>
          <Input className='normal-text' placeholderClass='text-placeholder' placeholder='请输入门店名称' onInput={this.onStoreNameChange} />
        </View>
        {
          // @ts-ignore
          <Picker mode='region' onChange={this.onRegionChange}>
            <View className='picker-cell-item border-bottom_1px'>
              <View className='title'>所在地区</View>
              <View className='cell-right'>
                {
                  !isSelectArea ? <SDText sd-class='picker-text-placeholder'>请选择门店所在地区</SDText> : <SDText sd-class='picker-normal-text'>{addressArea}</SDText>
                }
                <Image className='icon-next' src={IconNext}></Image>
              </View>
            </View>
          </Picker>
        }
        <View className='cell-item border-bottom_1px'>
          <View className='title'>门店地址</View>
          <Input className='normal-text' placeholderClass='text-placeholder' placeholder='请输入门店详细地址' onInput={this.onStoreAddressChange} />
        </View>
        <View className='cell-item border-bottom_1px'>
          <View className='title'>联系人</View>
          <Input className='normal-text' placeholderClass='text-placeholder' placeholder='请输入联系人姓名' onInput={this.onContactNameChange} />
        </View>
        <View className='cell-item border-bottom_1px'>
          <View className='title'>电话</View>
          <Input className='normal-text' type='number' placeholderClass='text-placeholder' placeholder='请输入联系人电话' onInput={this.onContactTelChange} />
        </View>

        <View className='main-section'>
          <View className='section-title'>说明</View>
          <View className='section-content'>欢迎加入我们，一起合作共赢，携手创造美好未来。 咨询电话：028-12345678</View>
        </View>

        <View style='height: 98rpx'></View>
        <View className='fixed-bottom'>
          <SDButton sd-class='' height={98} loading={btnIsLoading} onClick={this.onSubmitBtnTaped}>提交申请</SDButton>
          {
            bottomSafeHeight > 0 ? <View style={`height: ${bottomSafeHeight}px`}></View> : null
          }
        </View>
      </SDBody>
    )
  }

  onStoreNameChange = e => {
    this.storeInfo.name = e.detail.value
  }

  onRegionChange = e => {
    console.log(e)
    let regionCodeList = e.detail.code || [];
    let regionList = e.detail.value || []

    this.storeInfo.provinceId = regionCodeList.length > 0 ? regionCodeList[0] : '0'
    this.storeInfo.cityId = regionCodeList.length > 1 ? regionCodeList[1] : '0'
    this.storeInfo.countyId = regionCodeList.length > 2 ? regionCodeList[2] : '0'

    this.storeInfo.province = regionList.length > 0 ? regionList[0] : ''
    this.storeInfo.city = regionList.length > 1 ? regionList[1] : ''
    this.storeInfo.country = regionList.length > 2 ? regionList[2] : ''

    this.setState({
      addressArea: regionList.join(' '),
      isSelectArea: true
    })
  }

  onStoreAddressChange = e => {
    this.storeInfo.address = e.detail.value
  }

  onContactNameChange = e => {
    this.storeInfo.contactName = e.detail.value
  }

  onContactTelChange = e => {
    this.storeInfo.contactTel = e.detail.value
  }

  onSubmitBtnTaped = async () => {
    const { name, province, provinceId, city, cityId, country, countyId, address, contactName, contactTel } = this.storeInfo
    if (SDUtils.strIsEmpty(name)) {
      SDUtils.showMsg('请输入门店名称')
      return
    }
    if (SDUtils.strIsEmpty(province)) {
      SDUtils.showMsg('请选择门店所在地区')
      return
    }
    if (SDUtils.strIsEmpty(address)) {
      SDUtils.showMsg('请输入门店详细地址')
      return
    }
    if (SDUtils.strIsEmpty(contactName)) {
      SDUtils.showMsg('请输入联系人姓名')
      return
    }
    if (SDUtils.strIsEmpty(contactTel)) {
      SDUtils.showMsg('请输入联系人电话')
      return
    }
    if (!SDUtils.validFixedPhone(contactTel) && !SDUtils.validMobile(contactTel)) {
      SDUtils.showMsg('请输入正确的联系方式')
      return
    }

    Taro.showLoading({
      title: '加载中...',
      mask: true
    })

    try {
      await SDUtils.doPost('/wxmini/trader', {
        name: name,
        addr: {
          provinceId: provinceId,
          provinceName: province,
          cityId: cityId,
          cityName: city,
          countyId: countyId,
          countyName: country,
          address: address
        },
        contactName: contactName,
        contactPhone: contactTel
      })
      SDUtils.jumpTo('../success/index', {}, false)
      Taro.hideLoading()
    } catch (e) {
      SDUtils.showMsg(e)
    }

  }
}
